<template>
  <page class="product-execu-qisbase">
    <template slot="title">条码信息</template>
    <p-form>
      <p-form-item label="SN/PN码">
        <p-input :value="item.pnsn" disabled />
      </p-form-item>
    </p-form>

    <div class="product-execu-title mt20">消息提醒</div>
    <div v-if="statusText" :class="statusClass" class="product-execu-qisresult">{{ statusText }}</div>
  </page>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  components: {
    Page: () => import('./page.vue')
  },
  props: {
    params: Object,
    status: [String, Number]
  },
  data() {
    return {
      item: {}
    }
  },
  computed: {
    statusText() {
      let text
      switch (this.status) {
        case 0:
          text = 'NG'
          break
        case 1:
          text = 'OK'
          break
      }

      return text
    },
    statusClass() {
      return {
        ok: this.status === 1,
        ng: this.status === 0
      }
    }
  },
  watch: {
    params: {
      handler() {
        this.getInfo()
      },
      deep: true
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      if (!this.params.barCode || !this.params.stationCode) {
        return
      }
      getAction('/mes-manufacture/mfQisTest/getQisInfoByBarCode', this.params).then(res => {
        this.item = res.data || {}
        if (res.data) {
          this.$emit('change', res.data)
        } else {
          res.msg && this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less">
.product-execu-qisresult {
  width: 160px;
  height: 80px;
  margin: 0 auto;
  color: #fff;
  font-size: 20px;
  line-height: 80px;
  text-align: center;
  border-radius: 4px;

  &.ok {
    background-color: #4064DF;
  }

  &.ng {
    background-color: red;
  }
}
</style>